<template>
    <div>
        <nav-bar :activeIndex.sync="navIndex">
        </nav-bar>
        <div class="good-list-container" v-if="navIndex === '1'">
            <good-item v-for="good in goodList" :goodData='good' :key="good.id"></good-item>
        </div>
        <cart v-else-if="navIndex === '4'"></cart>
        <order v-else-if="navIndex === '5'"></order>
    </div>
</template>
  
<script>
import { ReqGoodsList } from '@/api/goods'
import GoodItem from './GoodItem.vue'
import NavBar from './NavBar.vue'
import Cart from './cart.vue'
import Order from './order.vue'

export default {
    components: { GoodItem, NavBar, Cart, Order },
    name: 'Home',
    data() {
        return {
            goodList: [],
            navIndex: '1'
        }
    },
    methods: {
    },
    mounted() {
        ReqGoodsList().then(res => {
            this.goodList = res
        })
    }
}
</script>
  
<style>
.good-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* 调整每行商品的左右对齐方式 */
}

.good-list-container::after {
    content: "";
    flex: auto;
}

.good-list-container>good-item {
    flex-basis: 25%;
    margin: 100px 100px !important;
    /* 调整每个goodItem的间隔 */
}
</style>
  